<template>
  <div class="health-tips-container">
    <div class="page-header">
      <h1>健康建议</h1>
      <p>专业的戒烟指导和健康建议</p>
    </div>

    <!-- 每日推荐 -->
    <div class="daily-tip-card">
      <div class="daily-tip-header">
        <h2>💡 今日推荐</h2>
        <button @click="refreshDailyTip" class="refresh-btn">
          🔄 换一个
        </button>
      </div>
      <div v-if="dailyTip" class="daily-tip-content">
        <h3>{{ dailyTip.title }}</h3>
        <p>{{ dailyTip.content }}</p>
        <div class="tip-actions">
          <button @click="markHelpful(dailyTip.id)" class="helpful-btn">
            👍 有用
          </button>
          <button @click="shareTip(dailyTip)" class="share-tip-btn">
            📤 分享
          </button>
        </div>
      </div>
    </div>

    <!-- 分类筛选 -->
    <div class="filter-section">
      <h2>建议分类</h2>
      <div class="category-filters">
        <button
          v-for="category in categories"
          :key="category.value"
          :class="['filter-btn', { active: activeCategory === category.value }]"
          @click="filterByCategory(category.value)"
        >
          <span class="category-icon">{{ category.icon }}</span>
          {{ category.label }}
        </button>
      </div>
    </div>

    <!-- 建议列表 -->
    <div class="tips-section">
      <div class="section-header">
        <h2>{{ getCategoryTitle() }}</h2>
        <div class="search-box">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索建议..."
            @input="searchTips"
          />
        </div>
      </div>

      <div v-if="loading" class="loading-state">
        <p>加载中...</p>
      </div>

      <div v-else-if="filteredTips.length === 0" class="empty-state">
        <p>暂无相关建议</p>
      </div>

      <div v-else class="tips-grid">
        <div
          v-for="tip in filteredTips"
          :key="tip.id"
          class="tip-card"
          @click="expandTip(tip)"
        >
          <div class="tip-header">
            <h3>{{ tip.title }}</h3>
            <span class="tip-category">{{ getCategoryLabel(tip.category) }}</span>
          </div>
          
          <div class="tip-content">
            <p>{{ tip.content }}</p>
          </div>
          
          <div class="tip-footer">
            <div class="tip-stats">
              <span class="helpful-count">👍 {{ tip.helpful_count || 0 }}</span>
            </div>
            <div class="tip-actions">
              <button @click.stop="markHelpful(tip.id)" class="helpful-btn-small">
                👍
              </button>
              <button @click.stop="shareTip(tip)" class="share-btn-small">
                📤
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速应对 -->
    <div class="quick-help-section">
      <h2>🚨 快速应对</h2>
      <p class="section-description">遇到强烈烟瘾时的紧急应对方法</p>
      
      <div class="quick-help-grid">
        <div
          v-for="quickTip in quickHelpTips"
          :key="quickTip.id"
          class="quick-help-card"
        >
          <div class="quick-help-icon">{{ quickTip.icon }}</div>
          <h4>{{ quickTip.title }}</h4>
          <p>{{ quickTip.description }}</p>
          <div class="quick-help-steps">
            <ol>
              <li v-for="(step, index) in quickTip.steps" :key="index">
                {{ step }}
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>

    <!-- 建议详情模态框 -->
    <div v-if="selectedTip" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ selectedTip.title }}</h3>
          <button @click="closeModal" class="close-btn">&times;</button>
        </div>
        
        <div class="modal-body">
          <div class="tip-category-badge">
            {{ getCategoryLabel(selectedTip.category) }}
          </div>
          
          <div class="tip-detailed-content">
            <p>{{ selectedTip.content }}</p>
            
            <div v-if="selectedTip.detailed_steps" class="detailed-steps">
              <h4>详细步骤：</h4>
              <ol>
                <li v-for="(step, index) in selectedTip.detailed_steps" :key="index">
                  {{ step }}
                </li>
              </ol>
            </div>
            
            <div v-if="selectedTip.benefits" class="tip-benefits">
              <h4>预期效果：</h4>
              <ul>
                <li v-for="(benefit, index) in selectedTip.benefits" :key="index">
                  {{ benefit }}
                </li>
              </ul>
            </div>
          </div>
          
          <div class="modal-actions">
            <button @click="markHelpful(selectedTip.id)" class="helpful-btn">
              👍 标记为有用
            </button>
            <button @click="shareTip(selectedTip)" class="share-btn">
              📤 分享建议
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 提示信息 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <div v-if="successMessage" class="success-message">
      {{ successMessage }}
    </div>
  </div>
</template>

<script>
import { healthTipApi } from '../api/index.js'

export default {
  name: 'HealthTipsView',
  data() {
    return {
      tips: [],
      filteredTips: [],
      dailyTip: null,
      selectedTip: null,
      activeCategory: 'all',
      searchQuery: '',
      loading: false,
      error: '',
      successMessage: '',
      categories: [
        { value: 'all', label: '全部', icon: '📋' },
        { value: 'general', label: '通用建议', icon: '💡' },
        { value: 'craving', label: '应对烟瘾', icon: '🚭' },
        { value: 'health', label: '健康知识', icon: '❤️' },
        { value: 'motivation', label: '动机激励', icon: '💪' },
        { value: 'exercise', label: '运动建议', icon: '🏃' },
        { value: 'diet', label: '饮食建议', icon: '🥗' }
      ],
      quickHelpTips: [
        {
          id: 'quick-1',
          icon: '🫁',
          title: '深呼吸法',
          description: '缓解烟瘾的最快方法',
          steps: [
            '找一个安静的地方坐下',
            '慢慢吸气4秒钟',
            '屏住呼吸4秒钟',
            '慢慢呼气4秒钟',
            '重复10次'
          ]
        },
        {
          id: 'quick-2',
          icon: '💧',
          title: '喝水法',
          description: '用喝水转移注意力',
          steps: [
            '立即喝一大杯水',
            '慢慢小口饮用',
            '专注于水的温度和口感',
            '持续5-10分钟'
          ]
        },
        {
          id: 'quick-3',
          icon: '🚶',
          title: '快速运动',
          description: '通过运动释放压力',
          steps: [
            '立即离开当前环境',
            '快走或原地踏步',
            '做10个深蹲或俯卧撑',
            '持续5分钟直到烟瘾减轻'
          ]
        }
      ]
    }
  },

  async mounted() {
    await this.loadData()
  },

  methods: {
    async loadData() {
      this.loading = true
      this.error = ''
      
      try {
        await Promise.all([
          this.loadHealthTips(),
          this.loadDailyTip()
        ])
        
        this.filterTips()
        
      } catch (error) {
        console.error('加载数据失败:', error)
        this.error = '加载数据失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },

    async loadHealthTips() {
      console.log('加载健康建议...')
      await new Promise(resolve => setTimeout(resolve, 800))
      
      // 模拟健康建议数据
      this.tips = [
        {
          id: 1,
          title: '深呼吸法应对烟瘾',
          content: '当烟瘾来袭时，深呼吸10次。吸气4秒，屏息4秒，呼气4秒。这能帮助放松神经系统。',
          category: 'craving',
          helpful_count: 15,
          detailed_steps: [
            '找一个安静舒适的地方',
            '采用腹式呼吸法',
            '吸气时数到4',
            '屏住呼吸数到4',
            '呼气时数到4',
            '重复整个过程10次'
          ],
          benefits: [
            '快速缓解烟瘾强度',
            '放松神经系统',
            '提高血氧浓度',
            '改善情绪状态'
          ]
        },
        {
          id: 2,
          title: '多喝水的重要性',
          content: '戒烟期间多喝水可以帮助排出体内毒素，减少烟瘾强度，建议每天至少8杯水。',
          category: 'health',
          helpful_count: 23
        },
        {
          id: 3,
          title: '运动替代吸烟',
          content: '感到压力或烟瘾时，进行5-10分钟的快走或伸展运动，可以释放内啡肽，改善心情。',
          category: 'exercise',
          helpful_count: 18
        },
        {
          id: 4,
          title: '戒烟后的身体变化',
          content: '戒烟20分钟：心率和血压下降。戒烟12小时：血液中一氧化碳水平恢复正常。',
          category: 'health',
          helpful_count: 31
        },
        {
          id: 5,
          title: '健康饮食建议',
          content: '多吃水果和蔬菜，避免咖啡因和酒精，这些可能会触发吸烟欲望。坚果和胡萝卜可以占据双手。',
          category: 'diet',
          helpful_count: 12
        },
        {
          id: 6,
          title: '保持积极心态',
          content: '记住戒烟的原因：健康、金钱、家人。将这些写下来，在困难时刻提醒自己。',
          category: 'motivation',
          helpful_count: 27
        }
      ]
    },

    async loadDailyTip() {
      console.log('加载每日建议...')
      await new Promise(resolve => setTimeout(resolve, 500))
      
      // 随机选择一个建议作为今日推荐
      const randomIndex = Math.floor(Math.random() * this.tips.length)
      this.dailyTip = this.tips[randomIndex] || this.tips[0]
    },

    filterByCategory(category) {
      this.activeCategory = category
      this.filterTips()
    },

    filterTips() {
      let filtered = this.tips
      
      // 按分类筛选
      if (this.activeCategory !== 'all') {
        filtered = filtered.filter(tip => tip.category === this.activeCategory)
      }
      
      // 按搜索关键词筛选
      if (this.searchQuery.trim()) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(tip =>
          tip.title.toLowerCase().includes(query) ||
          tip.content.toLowerCase().includes(query)
        )
      }
      
      this.filteredTips = filtered
    },

    searchTips() {
      this.filterTips()
    },

    expandTip(tip) {
      this.selectedTip = tip
    },

    closeModal() {
      this.selectedTip = null
    },

    async markHelpful(tipId) {
      try {
        console.log('标记建议为有用:', tipId)
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 500))
        
        // 更新本地数据
        const tip = this.tips.find(t => t.id === tipId)
        if (tip) {
          tip.helpful_count = (tip.helpful_count || 0) + 1
        }
        
        this.successMessage = '感谢您的反馈！'
        
        setTimeout(() => {
          this.successMessage = ''
        }, 3000)
        
      } catch (error) {
        console.error('标记失败:', error)
        this.error = '操作失败，请稍后重试'
      }
    },

    shareTip(tip) {
      const shareText = `${tip.title}\n\n${tip.content}\n\n来自HMM健康戒烟助手`
      
      if (navigator.share) {
        navigator.share({
          title: tip.title,
          text: shareText
        })
      } else {
        navigator.clipboard.writeText(shareText)
        this.successMessage = '建议已复制到剪贴板！'
        setTimeout(() => {
          this.successMessage = ''
        }, 3000)
      }
    },

    async refreshDailyTip() {
      try {
        // 随机选择一个不同的建议
        const otherTips = this.tips.filter(tip => tip.id !== this.dailyTip?.id)
        if (otherTips.length > 0) {
          const randomIndex = Math.floor(Math.random() * otherTips.length)
          this.dailyTip = otherTips[randomIndex]
        }
      } catch (error) {
        console.error('刷新失败:', error)
      }
    },

    getCategoryTitle() {
      const category = this.categories.find(c => c.value === this.activeCategory)
      return category ? category.label : '全部建议'
    },

    getCategoryLabel(categoryValue) {
      const category = this.categories.find(c => c.value === categoryValue)
      return category ? category.label : '通用建议'
    }
  }
}
</script>

<style scoped>
.health-tips-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 背景装饰元素 */
.health-tips-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.2) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.2) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.health-tips-container > * {
  position: relative;
  z-index: 1;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  animation: slideInDown 0.8s ease-out;
}

.page-header h1 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.page-header p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.daily-tip-card {
  background: linear-gradient(135deg, #A2D2FF 0%, #CDB4DB 100%);
  color: white;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  border: 2px solid #B4F8C8;
  box-shadow: 0 8px 25px rgba(162, 210, 255, 0.2);
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
}

.daily-tip-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.daily-tip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.daily-tip-header h2 {
  margin: 0;
  font-size: 24px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.daily-tip-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.daily-tip-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0.95;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.tip-actions {
  display: flex;
  gap: 15px;
}

.helpful-btn,
.share-tip-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.helpful-btn:hover,
.share-tip-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.filter-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.1s;
}

.filter-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.filter-section h2 {
  color: #444444;
  margin-bottom: 20px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  background: white;
  color: #666;
  border: 2px solid #e0e0e0;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.filter-btn:hover {
  border-color: #A2D2FF;
  color: #A2D2FF;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.filter-btn.active {
  background: linear-gradient(135deg, #FFD1DC 0%, #A2D2FF 100%);
  color: white;
  border-color: #A2D2FF;
  box-shadow: 0 4px 10px rgba(162, 210, 255, 0.3);
}

.category-icon {
  font-size: 16px;
}

.tips-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.2s;
}

.tips-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-header h2 {
  color: #444444;
  margin: 0;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.search-box input {
  padding: 10px 15px;
  border: 2px solid #A2D2FF;
  border-radius: 25px;
  width: 200px;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #FFD1DC;
  box-shadow: 0 0 0 2px rgba(255, 209, 220, 0.3);
}

.loading-state,
.empty-state {
  text-align: center;
  padding: 40px;
  color: #888888;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.tip-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tip-card:hover {
  border-color: #A2D2FF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px) scale(1.02);
}

.tip-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.tip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.tip-header h3 {
  color: #444444;
  margin: 0;
  font-size: 18px;
  flex: 1;
  padding-right: 10px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.tip-category {
  background: #f0f8ff;
  color: #0066cc;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  white-space: nowrap;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  font-weight: 500;
}

.tip-content p {
  color: #666;
  line-height: 1.6;
  margin: 0 0 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.tip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tip-stats {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #888888;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.tip-actions {
  display: flex;
  gap: 10px;
}

.helpful-btn-small,
.share-btn-small {
  background: none;
  border: 2px solid #e0e0e0;
  padding: 6px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
}

.helpful-btn-small:hover,
.share-btn-small:hover {
  border-color: #A2D2FF;
  background: #f0f8ff;
  transform: scale(1.1);
}

.quick-help-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.3s;
}

.quick-help-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.quick-help-section h2 {
  color: #444444;
  margin-bottom: 10px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.section-description {
  color: #888888;
  margin-bottom: 25px;
  font-size: 16px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.quick-help-card {
  background: linear-gradient(145deg, #fff5f5, #ffffff);
  border: 2px solid #ff6b6b;
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.quick-help-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #FF5252;
}

.quick-help-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #FFAFCC, #FF6B6B);
  border-radius: 0 0 20px 20px;
}

.quick-help-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.quick-help-card h4 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-help-card p {
  color: #666;
  margin-bottom: 15px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-help-steps ol {
  text-align: left;
  color: #555;
  line-height: 1.6;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-help-steps li {
  margin-bottom: 5px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  border: 2px solid #A2D2FF;
  position: relative;
  animation: zoomIn 0.3s ease;
}

.modal-content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.modal-header h3 {
  color: #444444;
  margin: 0;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #333;
  background: #f0f0f0;
}

.tip-category-badge {
  background: #f0f8ff;
  color: #0066cc;
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  font-weight: 500;
}

.tip-detailed-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.detailed-steps,
.tip-benefits {
  margin-bottom: 20px;
}

.detailed-steps h4,
.tip-benefits h4 {
  color: #444444;
  margin-bottom: 10px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.detailed-steps ol,
.tip-benefits ul {
  color: #555;
  line-height: 1.6;
  padding-left: 20px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.detailed-steps li,
.tip-benefits li {
  margin-bottom: 8px;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

.helpful-btn,
.share-btn {
  padding: 12px 24px;
  border: 2px solid #A2D2FF;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(162, 210, 255, 0.3);
}

.helpful-btn {
  background: linear-gradient(135deg, #B4F8C8 0%, #A2D2FF 100%);
  color: white;
}

.helpful-btn:hover {
  background: linear-gradient(135deg, #A2D2FF 0%, #CDB4DB 100%);
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(162, 210, 255, 0.4);
}

.share-btn {
  background: white;
  color: #A2D2FF;
}

.share-btn:hover {
  background: #f0f8ff;
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(162, 210, 255, 0.4);
}

.error-message {
  background: #fee;
  color: #c33;
  padding: 15px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
  border: 2px solid #fcc;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.success-message {
  background: #efe;
  color: #393;
  padding: 15px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
  border: 2px solid #cfc;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .health-tips-container {
    padding: 15px;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-box input {
    width: 100%;
  }
  
  .category-filters {
    justify-content: center;
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-help-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    padding: 20px;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}
</style>